<template>
    <div class="RecommendList">
        <p class="title">热门推荐</p>
        <router-link :to="'/detail/'+item.id" tag="div" class="hots-items" v-for="(item,index) of recommendList" :key="index">
            <img :src="item.imgUrl" alt="">
            <div class="hots-item" >
                <h3>{{item.title}}</h3>
                <p>{{item.content}}</p>
                <button class="btn">查看详情</button>
            </div>
        </router-link>
    </div>
</template>
<script>
export default {
  name: "RecommendList",
  props: {
    recommendList: {
      type: Array
    }
  }
};
</script>
<style lang="scss" scoped>
.RecommendList {
  .title{
    padding-left: 20px;
    background: #eee;
    line-height: 80px;
  }
  .hots-items {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    img {
      width: 150px;
      height: 150px;
    }
    .hots-item {
      padding:10px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p {
        color: #a8a8a7;
      }
      .btn {
        width: 140px;
        line-height: 40px;
        color: #ff8300;
        border: 1px solid #eee;
        outline: none;
        border-radius: 10px;
        text-align: center;
        background: #fff;
      }
    }
  }
}
</style>
